<template>
  <div id="tencentMapBox">
    这是一个腾讯地图演示版本 标记的使用
    <div id="info">
      当前mark坐标为：
      <span v-if="getaddress" id="position">{{
        addressInfo.address
      }}</span>
      <span v-else>鼠标点击时展示逆解析信息</span>
    </div>
    <div id="container" style="height:500px" />
    <div id="button-box">
      <span>详细api参数请参照 <a class="cur" href="https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder" target="_blank">官方文档</a></span>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="width"
    >
      <div>
        {{ addressInfo.pois }}
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <div id="button-box">
      <el-button type="primary" @click="dialogVisible=true">点击查看周边</el-button>
    </div>
  </div>
</template>

<script>

import { getLocation, getInfo } from '@/api/location'
/* eslint-disable no-undef */
export default {
  name: 'ReverseAddres',
  data() {
    return {
      map: null,
      temp: null,
      key: '你自己的key',
      option: {
        center: new TMap.LatLng(39.984120, 116.307484), // 设置地图中心点坐标
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
        zoom: 17 // 设置地图缩放级别
      },
      getaddress: false,
      HoverInfo: {
        lat: null,
        lng: null
      },
      dialogVisible: false,
      addressInfo: {

      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      this.temp = document.getElementById('container')
      const confg = {
        viewMode: '2D'
      }
      const option = Object.assign(this.option, confg)
      this.map = new TMap.Map(this.temp, option)
      this.addMark()
    },
    addMark() {
      this.map.on('click', this.addMarkPoit)
    },
    async addMarkPoit(evt) {
      this.getaddress = true
      const { lat, lng } = evt.latLng
      const params = {
        location: lat + ',' + lng,
        key: this.key,
        get_poi: 1
      }
      const data = await getLocation(params)
      this.addressInfo = data.result
      console.log(this.addressInfo)
    },
    resetDom() {
      this.temp.remove()
      const tencentMapBox = document.getElementById('tencentMapBox')
      this.temp = document.createElement('div')
      this.temp.id = 'container'
      tencentMapBox.insertBefore(this.temp, tencentMapBox.childNodes[0])
    }
  }
}
</script>
<style  lang="less">
#info {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 14px;
  background: #fff;
  width: 270px;
  padding: 10px;
  border-radius: 3px;
  z-index: 1;
}
.cur{
  color:blue
}
</style>
